<template>
  <div class="menu-wrap">
    <div class="swiper-box">
      <swiper
        class="swiper"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <block
          v-for="(item, index) in images"
          :key="index"
        >
          <swiper-item>
            <image
              :src="item.imgPath"
              class="slide-image"
              mode="aspectFill"
            />
          </swiper-item>
        </block>
      </swiper>
      <img
        src="/static/images/kefu.png"
        class='service'
        @click="showKefu"
      />
    </div>
    <div class="mein-block">
      <div class="menu-title">
        <image src="/static/images/juxing.png" />
        <span>我的订单</span>
      </div>
      <div class="menu-girds">
        <block
          v-for="(item,index) in orderGrids"
          :key="index"
        >
          <navigator
            :url="item.url"
            class="menu-gird"
            hover-class="weui-grid_active"
          >
            <image
              class="weui-grid__icon"
              :class="index == 1 ? 'shipped-icon' : ''"
              :src="item.src"
            />
            <div class="weui-grid__label item-name">{{item.name}}</div>
          </navigator>
        </block>
      </div>
    </div>
    <div class="mein-block">
      <div class="menu-title">
        <image src="/static/images/juxing.png" />
        <span>常用工具</span>
      </div>
      <div class="menu-girds">
        <block
          v-for="(item,index) in toolGrids"
          :key="index"
        >
          <navigator
            :url="item.url"
            class="menu-gird"
            style="width:25%"
            hover-class="weui-grid_active"
          >
            <image
              class="weui-grid__icon"
              :src="item.src"
            />
            <div class="weui-grid__label">{{item.name}}</div>
          </navigator>
        </block>
      </div>
    </div>
    <mytoast ref="toast" />

  </div>
</template>

<script>
import mytoast from "@/components/toast";
import api from "@/utils/api";

export default {
  components: { mytoast },

  data() {
    return {
      images: ["/static/images/user.png", "/static/images/user.png"],
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      orderGrids: [
        {
          src: "/static/images/dafahuo@2x.png",
          name: "待发货",
          url: "/pages/order/main?type=1"
        },
        {
          src: "/static/images/yifahuo@2x.png",
          name: "已发货",
          url: "/pages/order/main?type=2"
        },
        {
          src: "/static/images/tuikuanzhong@2x.png",
          name: "退款中",
          url: "/pages/order/main?type=3"
        },
        {
          src: "/static/images/quanbudingdan@2x.png",
          name: "全部订单",
          url: "/pages/order/main?type=4"
        }
      ],
      toolGrids: [
        {
          src: "/static/images/dianpuguanli@2x.png",
          name: "店铺管理",
          url: "/pages/shop/main"
        },
        {
          src: "/static/images/shougongdingdan@2x.png",
          name: "手工订单",
          url: "/pages/handsheet/main"
        },
        {
          src: "/static/images/dianzimiandan@2x.png",
          name: "面单维护",
          url: "/pages/elecsheet/main"
        },
        {
          src: "/static/images/dayinweihu@2x.png",
          name: "打印维护",
          url: "/pages/print/main"
        },
        {
            src: "/static/images/huishoujilv@2x.png",
            name: "回收记录",
            url: "/pages/huishou/main" },
        {
          src: "/static/images/fajianren@2x.png",
          name: "发件人",
          url: "/pages/fajianren/main?type=1"
        },
        {
          src: "/static/images/shoujianren@2x.png",
          name: "收件人",
          url: "/pages/fajianren/main?type=0"
        },
        { src: "/static/images/shezhi@2x.png",
            name: "设置",
            url: "/pages/setting/main"
        }
      ]
    };
  },
  computed: {},

  onLoad(options) {
    this.loadPic();
  },
  methods: {
    loadPic() {
      var _this = this;
      wx.request({
        url:
            wx.getStorageSync("otherPath") + api.queryNewPreferentialInfos +
          "?ecstoken=" +
          wx.getStorageSync("sessionId"),
        method: "POST",
          header: {
              'Content-Type': 'application/x-www-form-urlencoded',
              ecstoken : wx.getStorageSync('sessionId'),
              fslb : wx.getStorageSync('fslb')
          },
        data: {},
        success(res) {
          _this.images = res.data.data;
        },
        fail() {
          _this.$refs.toast.show("网络异常");
        }
      });
    },

    showKefu() {
      this.$refs.toast.show("客服QQ：800157966");
    }
  }
};
</script>
<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  /* text-align: center; */
  background-color: #f7fbff;
}
</style>
<style scoped>
.swiper-box{
  position: relative;
}
.swiper-box .service{
  display: block;
  position: absolute;
  bottom: 0.3rem;
  right: 0;
  width: 1.6rem;
  height: 0.6rem;
}
/* 菜单布局 */
.menu-girds {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.31rem;
  padding: 0.2rem;
}

.swiper {
  position: relative;
  height: 3.74rem;
}

.swiper image {
  width: 100%;
  height: 100%;
}
/* 客服按钮 */
/* .swiper .service {
  display: block;
  position: absolute;
  bottom: 0.3rem;
  right: 0;
  width: 1.6rem;
  height: 0.6rem;
} */
.customer {
  position: absolute;
  bottom: 0.3rem;
  right: 0;
  width: 1.5rem;
  height: 0.7rem;
  line-height: 0.7rem;
  background: #d8e6f3;
  text-align: right;
  padding-right: 10px;
  letter-spacing: 2px;

  border-top-left-radius: 20px;
  /* border-top-right-radius:4px; */
  /* border-bottom-right-radius:4px; */
  border-bottom-left-radius: 20px;
}

.customer::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.mein-block {
  background: #fff;
}

/* 卡片 */
.menu-gird {
  position: relative;
  /* padding: 0 10px; */
  padding-top: 0.2rem;
  /* padding-bottom: 10px; */
  width: 25%;
  box-sizing: border-box;
  text-align: center;
  /* margin-top: 0.3rem; */
}
.shipped-icon{
  width:68rpx;
}
.item-name {
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
  /* line-height: 30px; */
}

.weui-grid__icon + .weui-grid__label {
  margin-top: 0;
}

.menu-title {
  padding-left: 0.3rem;
  width: 100%;
  height: 15px;
  padding-top: 10px;
  color: #333333;
  font-weight: 500;
  font-size: 0.3rem;
}

.menu-title span {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 0.28rem;
  margin-left: 7px;
}

.menu-title image {
  position: relative;
  width: 0.06rem;
  height: 0.28rem;
  top: 0.03rem;
}
</style>
